<template>
    <div class="operate-log">
        <!-- 顶部客户信息 start -->
        <div class="Ptitle">客户管户信息查询</div>
        <div class="KHinfo">
            <div class="btn_selc">
                <ui-form  :model="queryForm" ref="paramForm" label-width="100px" class="demo-ruleForm">
                <ui-row type="flex" class="row-bg" justify="space-around">
                    <ui-col :span="8">
                        <ui-form-item label="客户名称" prop="paramNo">
                            <ui-input type="number" placeholder="请输入联系电话" v-model="queryForm.searchName"> </ui-input>
                        </ui-form-item>
                    </ui-col>
                    <ui-col :span="8">
                        <ui-form-item label="证件号码" prop="paramname">
                            <ui-input type="text" placeholder="请输入证件号码" v-model="queryForm.searchName"> </ui-input>
                        </ui-form-item>
                    </ui-col>
                </ui-row>
                <ui-row type="flex" class="row-bg" justify="space-around">
                    <ui-col :span="8">
                        <ui-form-item label="联系电话" prop="paramNo">
                            <ui-input type="number" placeholder="请输入联系电话" v-model="queryForm.searchName"> </ui-input>
                        </ui-form-item>
                    </ui-col>
                    <ui-col :span="8">
                       
                    </ui-col>
                </ui-row>

                <ui-row type="flex" class="row-bg" justify="center">
                    <ui-button type="primary" @click="submitForm('paramForm')">查询</ui-button>
                    <ui-button @click="resetForm('paramForm')">重置</ui-button>
                </ui-row>
            </ui-form>


<!-- 

                <ui-form :model="queryForm" class="query-form">
                    <ui-form-item label="客户名称">
                        <ui-input type="text" placeholder="请输入客户名称" v-model="queryForm.searchName"> </ui-input>
                    </ui-form-item>
                    <ui-form-item label="证件号码" style="margin-left: 50px;">
                        <ui-input type="text" placeholder="请输入证件号码" v-model="queryForm.searchName"> </ui-input>
                    </ui-form-item>
                    <ui-form-item label="联系电话">
                        <ui-input type="number" placeholder="请输入联系电话" v-model="queryForm.searchName"> </ui-input>
                    </ui-form-item>
                    <ui-form-item style="width: 80%;">
                        <ui-button class="primary-btn" @click="searchList(true)" icon="ui-icon-search">查询</ui-button>
                        <ui-button class="default-btn" @click="reset" icon="ui-icon-refresh-right">重置</ui-button>
                    </ui-form-item>
                </ui-form> -->
            </div>
        </div>
        <!-- 顶部客户信息 end -->
        <!-- 数据表格 start -->
        <div style="margin-top: 50px;background-color: #fff;">
            <div class="Ptitle2">客户列表</div>
            <div class="tableBody">
                <vx-nodata :list="tableData" v-loading="isLoading" sub-title="暂无数据">
                    <!-- 表格 -->
                    <vx-table :tableData="tableData" :isSelect="true" :columns="columns"
                        @multipleSelection="multipleSelection" :buttomGroup="buttomGroup"
                        @updataData="updataData"></vx-table>
                    <!-- 表格完 -->
                    <ui-pagination :total="total" :page-size="pageSize" :current-page="currentPage" :layout="layout"
                        :page-sizes="pageSizeList" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </ui-pagination>
                </vx-nodata>
            </div>
            <!-- 数据表格 end -->
        </div>
    </div>
</template>
    
<script>
import poerateLogApi from '@/api/operate-log';
import vxTable from '@/components/vx-table';
import pagination from '@/common/mixin/pagination.js'; // 混入/分页
export default {
    name: 'CustomerInquiry',
    mixins: [pagination],
    data() {
        return {
            queryForm: {
                operTime: [],
                types: '',
                searchName: ''
            }, // 查询表单
            tableData: [], // 列表数据
            isLoading: false, // 查询列表loading
            showDetail: false, // 详情弹框
            layout: 'prev, pager, next, total',
            columns: [
                {
                    prop: 'userName',
                    label: '客户号',
                    width: '120'
                }, {
                    prop: 'updatedBy',
                    label: '客户名称',
                },
                {
                    prop: 'updatedBy',
                    label: '客户类型',
                },
                {
                    prop: 'updatedBy',
                    label: '管户机构',
                },
                {
                    prop: 'updatedBy',
                    label: '管户人',
                },
                {
                    prop: 'updatedBy',
                    label: '分配状态',
                },
            ], //表头
            buttomGroup: [
                // { label: '删除', methodsName: 'delete' },
                // { label: '修改', methodsName: 'updataData' }
            ] // 操作按钮
        };
    },
    components: {
        vxTable
    },
    created() {
        // 获取列表数据
        this.searchList();
    },
    methods: {
        /**
         * 获取详情
         * @param {object} value 当前列表数据
         */
        async subDetail(value) {
            this.$set(value, 'detailLoading', true);
            try {
                const res = await poerateLogApi.getlogDetail({ id: value.id });
                this.logDetail = res.data;
                this.showDetail = true;
            } finally {
                this.$set(value, 'detailLoading', false);
            }
        },

        /**
         * 查询操作日志
         * @param {boolean} val 是否重置当前页签
         */
        async searchList(val) {
            this.isLoading = true;
            // 点击查询按钮 将页签重置为1
            if (val) {
                this.currentPage = 1;
            }
            try {
                const res = await poerateLogApi.getLogList({
                    ...this.queryForm, // 筛选条件
                    beginTime: this.queryForm.operTime[0] || '', // 开始时间
                    offTime: this.queryForm.operTime[1] || '', // 结束时间
                    pageSize: this.pageSize, // 页码
                    pageNum: this.currentPage, // 每页条数
                });
                res.data.list.forEach((item, index) => {
                    item.index = index + 1;
                });
                this.tableData = res.data.list;
                this.total = Number(res.data.total || 0);
            } finally {
                this.isLoading = false;
            }
        },
        /**
         * 重置
         */
        reset() {
            this.queryForm = { operTime: [] };
            this.currentPage = 1;
            this.searchList();
        },
    },
};
</script>
    
<style lang="scss" scoped>
.operate-log {
    background-color: #EFF1F7 !important;
    padding: 0 !important;

    .Ptitle {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
        padding-left: 20px;
    }

    .Ptitle2 {
        font-size: 20px;
        font-weight: bold;
        padding-top: 40px;
        padding-left: 20px;
    }

    .KHinfo {
        width: 100%;
        height: 200px;
        background-color: #fff;
        text-align: center;
    }

    .KHinfo span {
        font-size: 25px;
        line-height: 150px;
    }

    .btn_selc {
        width: 60%;
        margin: auto;
        padding-top: 25px;
    }

    .tableBody {
        width: 60%;
        margin: auto;
        margin-top: 50px;
    }

    .ui-icon-plus,
    .ui-icon-search {
        color: #fff;
    }

    .vx-dialog.ui-dialog {
        width: 750px;
    }

    .success {
        color: $color-success;
    }

    .error {
        color: $color-danger;
    }
}
</style>
    